<div class="page-header">
	<h1>Form Elements <small><i class="ace-icon fa fa-angle-double-right"></i> Common form elements and layouts</small></h1>
</div>
					
<form class="form-horizontal" role="form">
	<div class="form-group">
		<label class="col-sm-3 control-label no-padding-right" for="form-field-1">
			Text Field
		</label>
		<div class="col-sm-9">
			<input type="text" id="form-field-1" placeholder="Username" class="col-xs-10 col-sm-5" />
		</div>		
	</div>

	<div class="form-group">
		<label class="col-sm-3 control-label no-padding-right" for="form-field-1-1">
			Full Length
		</label>
		<div class="col-sm-9">
			<input type="text" id="form-field-1-1" placeholder="Text Field" class="form-control" />
		</div>
	</div>

	<div class="space-4"></div>

	<div class="form-group">
		<label class="col-sm-3 control-label no-padding-right" for="form-field-2">
			Password Field
		</label>
		<div class="col-sm-9">
			<input type="password" id="form-field-2" placeholder="Password" class="col-xs-10 col-sm-5" />
			<span class="help-inline col-xs-12 col-sm-7">
				<span class="middle">Inline help text</span>
			</span>
		</div>
	</div>
	
	<div class="space-4"></div>
	
	<div class="form-group">
		<label class="col-sm-3 control-label no-padding-right" for="form-input-readonly">
			Readonly field
		</label>
		<div class="col-sm-9">
			<input ng-readonly="!$disabled" ng-disabled="$disabled" type="text" class="col-xs-10 col-sm-5" ng-value="'This text field is '+($disabled ? 'disabled' : 'readonly')+'!'" />
			<span class="help-inline col-xs-12 col-sm-7">
				<label class="middle">
					<input class="ace" type="checkbox" ng-model="$disabled" />
					<span class="lbl"> Disable it!</span>
				</label>
			</span>
		</div>
	</div>

	<div class="space-4"></div>

	<div class="form-group">
		<label class="col-sm-3 control-label no-padding-right" for="form-field-4">Relative Sizing</label>
		<div class="col-sm-9">
			<input ng-class="inputSizing[$inputSize]" type="text" placeholder="{{'.'+inputSizing[$inputSize]}}" />
			<div class="space-2"></div>
			<div style="width: 200px;" class="help-block" ng-model="$inputSize" ui-slider="{'range': 'min'}" min="1" max="8" step="1"></div>
		</div>
		
		

		
	</div>

	<div class="form-group">
		<label class="col-sm-3 control-label no-padding-right" for="form-field-5">Grid Sizing</label>
		<div class="col-sm-9">
			<div class="clearfix">
				<input ng-class="'col-xs-'+$inputGrid" type="text" placeholder="{{'.col-xs-'+$inputGrid}}" />
			</div>
			<div class="space-2"></div>
			<div class="help-block" ng-model="$inputGrid" ui-slider="{'range': 'min'}" min="1" max="12" step="1"></div>
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-3 control-label no-padding-right">Input with Icon</label>
		<div class="col-sm-9">
			<span class="input-icon">
				<input type="text" id="form-field-icon-1">
				<i class="ace-icon fa fa-leaf blue"></i>
			</span>
			
			<span class="input-icon input-icon-right">
				<input type="text" id="form-field-icon-2">
				<i class="ace-icon fa fa-leaf green"></i>
			</span>
		</div>
	</div>

	<div class="space-4"></div>

	<div class="form-group">
		<label class="col-sm-3 control-label no-padding-right" for="form-field-6">Tooltip and help button</label>
		<div class="col-sm-9">
			<input type="text" placeholder="Tooltip on hover" uib-tooltip="Hello Tooltip!" tooltip-placement="bottom" />
			<span class="help-button" uib-popover="More details." popover-title="Popover on hover" popover-trigger="mouseenter" popover-placement="left">?</span>
		</div>
	</div>


	<div class="clearfix form-actions">
		<div class="col-md-offset-3 col-md-9">
			<button class="btn btn-info" type="button"><i class="ace-icon fa fa-check bigger-110"></i> Submit</button>
			&nbsp; &nbsp; &nbsp;
			<button class="btn" type="reset"><i class="ace-icon fa fa-undo bigger-110"></i> Reset</button>
		</div>
	</div>


	<div class="hr hr-24"></div>


	<div class="row">
	  <div class="col-xs-12 col-sm-4">
		<div widget-box class="widget-box">
			<widget-header toolbar="{toggle: true, close: true}">Text Area</widget-header>
			
			<div class="widget-body">
			 <div class="widget-main">
				<div>
					<label for="form-field-8">Default</label>
					<textarea class="form-control" id="form-field-8" placeholder="Default Text"></textarea>
				</div>

				<hr />

				<div>
					<label for="form-field-9">With Character Limit</label>
					<textarea id="form-field-9" class="form-control" input-limiter maxlength="50"></textarea>					
				</div>

				<hr />
				
				<div>
					<label for="form-field-11">Autosize</label>
					<textarea id="form-field-11" msd-elastic="\n" ng-model="textarea_autosize" class="form-control"></textarea>					
				</div>
			 </div>
			</div>
		</div>
	  </div><!-- /.span -->



	  <div class="col-xs-12 col-sm-4">
		<div widget-box class="widget-box">
			<widget-header toolbar="{toggle: true, close: true}">Masked Input</widget-header>
			<div class="widget-body">
			 <div class="widget-main">
				<div>
					<label for="form-field-mask-1">Date <small class="text-success">99/99/9999</small></label>
					<div class="input-group">
						<input class="form-control" type="text" id="form-field-mask-1" ng-model="maskdate" ui-mask="99/99/9999"  ui-mask-placeholder ui-mask-placeholder-char="_" />
						<span class="input-group-btn">
							<button class="btn btn-sm btn-default" type="button"><i class="ace-icon fa fa-calendar bigger-110"></i> Go!</button>
						</span>
					</div>
				</div>
				<hr />
				<div>
					<label for="form-field-mask-2">Phone <small class="text-warning">(999) 999-9999</small></label>
					<div class="input-group">
						<span class="input-group-addon"><i class="ace-icon fa fa-phone"></i></span>
						<input class="form-control" type="text" id="form-field-mask-2" ng-model="maskphone" ui-mask="(999) 999-9999" />
					</div>
				</div>
				<hr />
				<div>
					<label for="form-field-mask-3">Product Key <small class="text-error">a*-999-a999</small></label>
					<div class="input-group">
						<input class="form-control" type="text" id="form-field-mask-3" ng-model="maskproduct" ui-mask="a*-999-a999"  />
						<span class="input-group-addon"><i class="ace-icon fa fa-key"></i></span>
					</div>
				</div>
				<hr />
				<div>
					<label for="form-field-mask-4">Eye Script <small class="text-info">~9.99 ~9.99 999</small></label>
					<div>
						<input class="input-medium" type="text" id="form-field-mask-4" ng-model="maskeye" ui-mask="-9.99 -9.99 999" />
					</div>
				</div>

			 </div>
			</div>
		</div>
	  </div><!-- /.span -->


	  <div class="col-xs-12 col-sm-4">
		<div widget-box class="widget-box">
			<widget-header toolbar="{toggle: true, close: true}">Select Box</widget-header>
			
			<div class="widget-body">
			 <div class="widget-main">
				<div>
					<label for="form-field-select-1">Default</label>
					<select class="form-control" id="form-field-select-1" ng-model="selectedStates" ng-options="state.name for state in getCommonData('states') track by state.abbr">
					</select>
				</div>
				<hr />
				<div>
					<label for="form-field-select-2">Multiple</label>
					<select class="form-control" id="form-field-select-2" multiple="multiple" ng-model="selectedStates2" ng-options="state.name for state in getCommonData('states') track by state.abbr">
					</select>
				</div>
				<hr />
				<div>
					<label for="form-field-select-3">Chosen</label>
					<br />
					<select chosen ng-model="chosenStates" ng-options="state.name for state in getCommonData('states') track by state.abbr" class="chosen-select form-control" id="form-field-select-3" data-placeholder="Choose a State...">
						 <option value=""> </option>
					</select>
				</div>
				<hr />
				<div>
					<div class="row">
						<div class="col-sm-6">
							<span class="bigger-110">Multiple</span>
						</div><!-- /.span -->
						<div class="col-sm-6">
							<span class="pull-right inline">
								<span class="grey">style:</span>
								<span class="btn-toolbar inline middle no-margin">
									<span id="chosen-multiple-style" data-toggle="buttons" class="btn-group no-margin">
										<label class="btn btn-xs btn-yellow active" ng-model="chosenStyle" uib-btn-radio="1">1</label>
										<label class="btn btn-xs btn-yellow" ng-model="chosenStyle" uib-btn-radio="2">2</label>
									</span>
								</span>
							</span>
						</div><!-- /.span -->
					</div>
					<div class="space-2"></div>
					
					<select chosen ng-model="chosenStates2" ng-options="state.name for state in getCommonData('states') track by state.abbr" multiple class="chosen-select form-control" ng-class="{'tag-input-style': chosenStyle == 2}" id="form-field-select-4" data-placeholder="Choose a State...">
						
					</select>
				</div>
			 </div>
			</div>
		</div>
	  </div><!-- /.span -->
		  
	</div><!-- /.row -->
	

	<div class="space-24"></div>

	<h3 class="header smaller lighter blue">Checkboxes & Radio <small>All Checkboxes, Radios and Switch Buttons Are Pure CSS</small></h3>


	<div class="row">
	  <div class="col-xs-12 col-sm-5">
		<div class="control-group">
			<label class="control-label bolder blue">Checkbox</label>
			<!-- #section:custom/checkbox -->
			<div class="checkbox">
				<label>
					<input name="form-field-checkbox" type="checkbox" class="ace" /><span class="lbl"> choice 1</span>
				</label>
			</div>
			<div class="checkbox">
				<label>
					<input name="form-field-checkbox" type="checkbox" class="ace" /><span class="lbl">  choice 2</span>
				</label>
			</div>
			<div class="checkbox">
				<label>
					<input name="form-field-checkbox" class="ace ace-checkbox-2" type="checkbox" /><span class="lbl"> choice 3</span>
				</label>
			</div>
			<div class="checkbox">
				<label class="block">
					<input name="form-field-checkbox" disabled type="checkbox" class="ace" /><span class="lbl"> disabled</span>
				</label>
			</div>
			<div class="checkbox">
				<label class="block">
					<input name="form-field-checkbox" type="checkbox" class="ace input-lg" /><span class="lbl bigger-120"> large checkbox</span>
				</label>
			</div>
			<!-- /section:custom/checkbox -->
		</div>
	  </div>
	
	  <div class="col-xs-12 col-sm-6">
		<div class="control-group">
			<label class="control-label bolder blue">Radio</label>
			<div class="radio">
				<label>
					<input name="form-field-radio" type="radio" class="ace" /><span class="lbl"> radio option 1</span>
				</label>
			</div>
			<div class="radio">
				<label>
					<input name="form-field-radio" type="radio" class="ace" /><span class="lbl"> radio option 2</span>
				</label>
			</div>
			<div class="radio">
				<label>
					<input name="form-field-radio" type="radio" class="ace" /><span class="lbl"> radio option 3</span>
				</label>
			</div>
			<div class="radio">
				<label>
					<input disabled name="form-field-radio" type="radio" class="ace" /><span class="lbl"> disabled</span>
				</label>
			</div>
			<div class="radio">
				<label>
					<input name="form-field-radio" type="radio" class="ace input-lg" /><span class="lbl bigger-120"> large radio</span>
				</label>
			</div>
		</div>
	
	  </div>
	</div><!-- /.row -->
	
	<hr />

	<div class="form-group">
		<label class="control-label col-xs-12 col-sm-3">On/Off Switches</label>
		<div class="controls col-xs-12 col-sm-9">
			<!-- #section:custom/checkbox.switch -->
			<div class="row">
				<div class="col-xs-3">
					<label>
						<input name="switch-field-1" class="ace ace-switch" type="checkbox" />
						<span class="lbl"></span>
					</label>
				</div>
			
				<div class="col-xs-3">
					<label>
						<input name="switch-field-1" class="ace ace-switch ace-switch-2" type="checkbox" />
						<span class="lbl"></span>
					</label>
				</div>
		
				<div class="col-xs-3">
					<label>
						<input name="switch-field-1" class="ace ace-switch ace-switch-3" type="checkbox" />
						<span class="lbl"></span>
					</label>
				</div>
				
				<div class="col-xs-3">
					<label>
						<input name="switch-field-1" class="ace ace-switch" type="checkbox" />
						<span class="lbl" data-lbl="CUS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TOM"></span>
					</label>
				</div>
			</div>

			<div class="row">
				<div class="col-xs-3">
					<label>
						<input name="switch-field-1" class="ace ace-switch ace-switch-4" type="checkbox" />
						<span class="lbl"></span>
					</label>
				</div>
			
				<div class="col-xs-3">
					<label>
						<input name="switch-field-1" class="ace ace-switch ace-switch-5" type="checkbox" />
						<span class="lbl"></span>
					</label>
				</div>

				<div class="col-xs-3">
					<label>
						<input name="switch-field-1" class="ace ace-switch ace-switch-6" type="checkbox" />
						<span class="lbl"></span>
					</label>
				</div>
				
				<div class="col-xs-3">
					<label>
						<input name="switch-field-1" class="ace ace-switch ace-switch-7" type="checkbox" />
						<span class="lbl"></span>
					</label>
				</div>
			</div>
			
			<div class="row">
				<div class="col-xs-3">
					<label>
						<input name="switch-field-1" class="ace ace-switch btn-rotate" type="checkbox" />
						<span class="lbl"></span>
					</label>
				</div>
			
				<div class="col-xs-3">
					<label>
						<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-rotate" type="checkbox" />
						<span class="lbl"></span>
					</label>
				</div>
		
				<div class="col-xs-3">
					<label>
						<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty" type="checkbox" />
						<span class="lbl"></span>
					</label>
				</div>
				
				<div class="col-xs-3">
					<label>
						<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-flat" type="checkbox" />
						<span class="lbl"></span>
					</label>
				</div>
			</div>
			<!-- /section:custom/checkbox.switch -->
		</div>
	</div>
	
	<hr />
	
	<div class="row">
		<div class="col-sm-4">
			<div widget-box class="widget-box">
				<widget-header toolbar="{toggle: true, close: true}">Custom File Input</widget-header>
				
				<div class="widget-body">
				 <div class="widget-main">
					<div class="form-group">
						<div class="col-xs-12">
							<!-- #section:custom/file-input -->
							<input type="file" ace-fileinput ng-model="files1" options="fileInputOptions1" props="fileInputProps1" on-change="fileChanged" />
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<input multiple type="file" ace-fileinput ng-model="files2" options="fileInputOptions2" />
							<!-- /section:custom/file-input -->
						</div>
					</div>
					<!-- #section:custom/file-input.filter -->
					<label>
						<input type="checkbox" name="file-format" class="ace" ng-model="pictureOnly" />
						<span class="lbl"> Allow only images</span>
					</label>
					<!-- /section:custom/file-input.filter -->
				 </div>
				</div>
			</div>
		</div>

		<div class="col-sm-4">
			<div widget-box class="widget-box">
				<widget-header>jQuery UI Sliders</widget-header>

				<div class="widget-body">
				 <div class="widget-main">
					<div class="row">
						<div class="col-xs-3 col-md-2">
							<div id="slider-range"></div>
							<div ng-model="slideVal" style="height:200px;" ui-slider="{'range': true, 'orientation': 'vertical', 'values': [ 17, 67 ]}"></div>
						</div>
						<div class="col-xs-9 col-md-10">
							<div id="slider-eq">
								<div class="space"></div>
								
								<div ng-model="$sliders[0]" class="ui-slider-green ui-slider-small" ui-slider="{'range': 'min', 'animate': true, 'min': 1, 'max': 100, 'step': 1}"></div>
								<div class="space"></div>
								<div ng-model="$sliders[1]" class="ui-slider-red" ui-slider="{'range': 'min'}"></div>
								<div class="space"></div>
								<div ng-model="$sliders[2]" class="ui-slider-purple" ui-slider="{'range': 'min'}" uib-tooltip="Disabled!" disabled="true"></div>
								<div class="space"></div>
								
								<div ng-model="$sliders[3]" class="ui-slider-simple ui-slider-orange" ui-slider="{'range': 'min'}" step="1"></div>
								<div class="space"></div>
								<div ng-model="$sliders[4]" class="ui-slider-simple ui-slider-dark" ui-slider="{'range': 'min'}" step="1"></div>
							</div>
						</div>
					</div>
				 </div>
				</div>
			</div>
		</div>
		
		<div class="col-sm-4">
			<div widget-box class="widget-box">
				<widget-header>Spinners</widget-header>
				
				<div class="widget-body">
				 <div class="widget-main">
					<input type="text" fx-spinner options='$spinner[0]' ng-model="spinVal" />
					 <div class="space-6"></div>
					<input type="text" class="input-sm" fx-spinner options='$spinner[1]' />
					 <div class="space-6"></div>
					<input type="text" id="spinner3" fx-spinner options='$spinner[2]'  />
					 <div class="space-6"></div>
					<input type="text" class="input-lg" fx-spinner options='$spinner[3]' />
				 </div>
				</div>
			</div>
		</div>
	</div>




	<hr />


	<div class="row">
		<div class="col-sm-4">
			<div widget-box class="widget-box">
				<widget-header toolbar="{toggle: true, close: true}">Date &amp; Color</widget-header>
				<div class="widget-body">
				 <div class="widget-main">

						<label for="id-date-picker-1">Date Picker</label>
						<div class="row">
							<div class="col-xs-8 col-sm-11">
								<div class="input-group">
									<input class="form-control" type="text" bs-datepicker ng-model="datePicker.value" options="datePicker.opts" />
									
									<span class="input-group-addon">
										<i class="fa fa-calendar bigger-110"></i>
									</span>
								</div>
							</div>
						</div>
						
						<div class="space space-8"></div>
						
						<label>Range Picker</label>
						<div class="row">
							<div class="col-xs-8 col-sm-11">
								<div class="input-daterange input-group" bs-datepicker ng-model="datePicker.range" options="datePicker.opts">
									<input type="text" class="input-sm form-control" name="start" />
									<span class="input-group-addon">
										<i class="fa fa-exchange"></i>
									</span>
									<input type="text" class="input-sm form-control" name="end" />
								</div>
							</div>
						</div>

						<hr />
						
						<label for="id-date-range-picker-1">Date Range Picker</label>
						<div class="row">
							<div class="col-xs-8 col-sm-11">
								<div class="input-group">
									<span class="input-group-addon">
										<i class="fa fa-calendar bigger-110"></i>
									</span>
									<input class="form-control" type="text" name="date-range-picker" date-range-picker ng-model="dateRange.values" options="dateRange.opts" />
								</div>
							</div>
						</div>
						
						<hr />
						
						<label for="timepicker1">Time Picker</label>
						<div class="input-group">
							<input class="form-control" bs-timepicker ng-model="timePicker.value" options="timePicker.opts" />
							<span class="input-group-addon">
								<i class="fa fa-clock-o bigger-110"></i>
							</span>
						</div>

						
						<hr />
						<label for="date-timepicker1">Date/Time Picker</label>
						<div class="input-group">
							<input date-timepicker ng-model="dateTimePicker.value" options="dateTimePicker.opts" class="form-control" />
							<span class="input-group-addon">
								<i class="fa fa-clock-o bigger-110"></i>
							</span>
						</div>
						
						<hr />
						
						<div class="clearfix">
							<label for="colorpicker1">Color Picker</label>
						</div>
						<div class="control-group">
							<div class="bootstrap-colorpicker">
								<input colorpicker="hex" colorpicker-position="top" type="text" ng-model="colorPicker.value" />
							</div>
						</div>

				 </div>
				</div>
			</div>
		</div>
		
		<div class="col-sm-4">
			<div widget-box class="widget-box">
				<widget-header>More Elements</widget-header>
				
				<div class="widget-body">
				 <div class="widget-main">

						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-top">
								Star Rating
							</label>
							<div class="col-sm-9">
								<uib-rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" state-on="rating.on" state-off="rating.off" aria-labelledby="default-rating"></uib-rating>
							</div>
						</div>
						
						<hr />
						
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right">Typeahead.js</label>
							<div class="col-sm-9">
								<div class="pos-rel">
									<input type="text" class="typeahead scrollable" sf-typeahead options="typeaheadOpts" datasets="typeaheadData" ng-model="typeahead" />
								</div>
							</div>
						</div>

						
						<hr />
	

	
						<script type="text/ng-template" id="multiselect.tpl.html">
						 <div class="btn-group">
							<button tabindex="{{tabindex}}" title="{{header}}" type="button" class="btn btn-default btn-white dropdown-toggle" ng-click="toggleSelect()" ng-disabled="disabled" ng-class="{'error': !valid()}">
							  <span class="multiselect-selected-text" ng-bind="header"></span> &nbsp;<b class="fa fa-caret-down"></b>
							</button>
							<ul class="multiselect-container dropdown-menu">
								<li ng-show="items.length > filterAfterRows" class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="fa fa-search"></i></span><input ng-model="filter" type="text" class="form-control multiselect-search" placeholder="Search"><span class="input-group-btn"><button type="button" class="btn btn-white btn-grey multiselect-clear-filter"><i class="fa fa-times-circle red2"></i></button></span></div></li>
								<li data-stopPropagation="true" ng-repeat="i in items | filter:filter">
									<a ng-click="select($event, i)" tabindex="0">
										<label class="checkbox">
											<input type="checkbox" class="ace" ng-checked="i.checked" /><span class="lbl"></span> {{i.label}}
										</label>
									</a>
								</li>
							</ul>
						 </div>
						</script>


						<div class="form-group">
							<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="food">Multiselect</label>
							<div class="col-xs-12 col-sm-9">
								<!-- #section:plugins/input.multiselect -->
								
								<multiselect ng-model="multiselectModel" options="c for c in selectOptions" data-multiple="true"></multiselect>

								<!-- /section:plugins/input.multiselect -->
							</div>
						</div>
						
						<hr />

						<div class="form-group">
							<label class="control-label col-xs-12 col-sm-3 no-padding-right">
								Select2							
							</label>
							
							<div class="col-xs-11 col-sm-8">
								<!-- #section:plugins/input.select2 -->
								  <ui-select multiple ng-model="select2Color" theme="select2" style="width: 95%;">
									<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
									<ui-select-choices repeat="color in availableColors | filter:$select.search">
									  {{color}}
									</ui-select-choices>
								  </ui-select>
								<!-- /section:plugins/input.select2 -->
							</div>
						</div>


				 </div>
				</div>
			</div>
		</div>
		
		<div class="col-sm-4">
			<div widget-box class="widget-box">
				<widget-header><i class="ace-icon fa fa-tachometer"></i> Knob Input</widget-header>
				
				<div class="widget-body">
				 <div class="widget-main">
						<div class="control-group">
						
						  <div class="row">
							<div class="col-xs-6 center">
								<!-- #section:plugins/charts.knob -->
								<div class="knob-container inline">
									<knob knob-data="knob1.value" knob-options="knob1.opts"></knob>
								</div>
							</div>
							<div class="col-xs-6  center">
								<div class="knob-container inline">
									<knob knob-data="knob2.value" knob-options="knob2.opts"></knob>
								</div>
								<!-- /section:plugins/charts.knob -->
							</div>
						  </div>
						  <div class="row">
							<div class="col-xs-12 center">
								<div class="knob-container inline">
									<knob knob-data="knob3.value" knob-options="knob3.opts"></knob>
								</div>
							</div>
						  </div>
						
						</div>
				 </div>
				</div>

			</div>
		</div>
	</div>
</form>

